<template>
  <button @click="change">改变</button>
  <h1>个人信息:</h1>
  <h2>姓名:{{ person.name }}</h2>
  <h2 v-show="person.age">年龄:{{ person.age }}</h2>
  <h2 v-show="person.sex">性别:{{ person.sex }}</h2>
  <h1>其他信息:</h1>
  <h2>类型:{{ person.job.type }}</h2>
  <h2>年纪:{{ person.job.class }}</h2>
  <br />
  姓:<input type="text" v-model="person.firstName" />
  <br />
  名:<input type="text" v-model="person.lastName" />
  未知属性:{{ person?.newAttr }}
  <br />
  <span>{{ person.fullName }}</span>
  <hr />
  <!-- <h2>当前鼠标点为x:{{ point.x }},y:{{ point.y }}</h2> -->
  <h1>儿子组件</h1>
  <Child :name="person.name" ref="content" @pushMessage="pushMessage" @dleNewAttr="dleNewAttr"/>
</template>

<script lang="ts" setup>
import { reactive, computed, onMounted, ref, getCurrentInstance } from "vue";
import savePoint from "../hooks/usePoint";
import Child from "./Child.vue";
const person = reactive({
  name: "张三",
  age: 18,
  job: {
    type: "大学生",
    class: "大一",
  },
  firstName: "张",
  lastName: "三",
});
person.fullName = computed(() => {
  return person.firstName + "-" + person.lastName;
});
const change = ()=>{
  person.name = '李耀龙'
}
let obj = {
  a:1,
  b:{
    bs:2
  }
}

let pObj = new Proxy(obj,{
  get(target,key){
    console.log('读取属性',target,key)
  },
  set(target,key,newValue){
    console.log('修改属性',target,key,newValue)
    target[key] = newValue
    return true
  }
})
pObj.b=3
console.log(pObj)
const content = ref();
onMounted(() => {
  // 必须在挂载的时候用，否则拿不到自组件ref实例
  console.log(content.value.getMessage(person.name));
});

const pushMessage = (msg)=>{
  person.newAttr = '新加属性'
  console.log(msg)
}
const dleNewAttr = ()=>{
  if(person.newAttr){
    delete person.newAttr
  }else{
    alert('暂无该属性')
  }
}


let point = savePoint();
</script>